<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>

    // 模块化
    // 目的: 将一个大的项目差分成相互依赖的小文件, 使用时按需引入即可 (分离的基本上都是JS文件 -> 代码逻辑)
    // 优点:
    // 1. 减少全局变量使用,(放置变量污染)   => 模块内的变量和方法都是局部的
    // 2. 按需暴露,按需引入   
    //    ES6 Model   => export    import  (前端页面)
    //    CommonJS    => module.exports={}    require  (NodeJS)
    // 3. 模块之间也是可以相互引入的
    // 4. 有利于代码后期维护


    // Vue的组件化
    // 目的: 和模块化类似(将一个大的项目差分成相互依赖的小文件) => 但是组件化不仅限于分离JS,还有HTML,CSS  => 一个组件就是一个单独的Vue实例,每一个组件都有一套完整的功能   
    // 简单的来说:就是将Vue中的功能模块分离到单独的Vue实例中  => 实现代码复用

    // 注意: 
    // 1. 组件之间也可以相互嵌套((根组件(根实例) 父组件 子组件))  
    // 2. 当前课程中,所有的代码都写在一个html文件中,当前案例中组件分离可能不是很彻底 => 脚手架(单文件组件 -> 一个文件就是一个组件 html + css + js)




</script>
</html>